<template>
  <div class="xtx_goods_topic">
    <div class="container">
      <div class="xtx_panel_header">
        <h3>最新专题</h3>
        <a href="javascript:;" class="more">
          查看全部
          <i class="iconfont icon-angle-right"></i>
        </a>
      </div>
      <div class="xtx_topic">
        <ul class="clearfix">
          <li v-for="item in specials" :key="item.id">
            <a href="javascript:;">
              <img :src="item.cover" alt />
              <div class="meta">
                <p class="title">
                  {{item.title}}
                  <small>{{item.summary}}</small>
                </p>
                <span class="price">
                  <small>￥</small>
                  {{item.lowestPrice}}起
                </span>
              </div>
            </a>
            <div class="social">
              <span class="like">
                <i class="iconfont icon-xin"></i>
                {{item.collectNum}}
              </span>
              <span class="view">
                <i class="iconfont icon-chakan"></i>
                {{item.viewNum}}
              </span>
              <span class="reply">
                <i class="iconfont icon-zhibiaozhushibiaozhu"></i>
                {{item.comment_count}}
              </span>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'home-special',
  data () {
    return {
      specials: []
    }
  },
  created () {
    this.getSpecials()
  },
  methods: {
    getSpecials () {
      this.$http.get('/home/special').then((res) => {
        this.specials = res.data.result
      })
    }
  }
}
</script>

<style scoped lang='less'>
@import "../styles/_mixins.less";
.xtx_goods_topic {
  .home_panel_header();
  background-color: #f5f5f5;
  padding-bottom: 52px;
  li {
    width: 406px;
    margin-left: 11px;
    transition: 0.5s;
    float: left;
    background: white;
    &:hover {
      box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
      transform: translate3d(0, -3px, 0);
    }

    &:first-child {
      margin-left: 0;
    }

    a {
      display: block;
      height: 287px;

      position: relative;
    }
  }

  .meta {
    width: 100%;
    height: 100%;
    color: #fff;
    background-image: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.8),
      transparent 50%
    );
    position: absolute;
    bottom: 0;

    .title {
      height: 70px;
      padding-left: 16px;
      font-size: 22px;
      position: absolute;
      bottom: 0px;

      small {
        display: block;
        font-size: 19px;
        color: #999;
      }
    }

    .price {
      position: absolute;
      bottom: 25px;
      right: 16px;

      display: block;
      line-height: 1;
      padding: 4px 8px 4px 7px;
      color: @priceColor;
      font-size: 17px;
      background-color: #fff;
      border-radius: 2px;

      small {
        font-size: 15px;
      }
    }
  }

  .social {
    height: 70px;
    line-height: 70px;
    padding: 0 20px;
    font-size: 16px;

    i {
      display: inline-block;
      width: 15px;
      height: 14px;
      margin-right: 5px;
      color: #999;
    }
    .like,
    .view {
      float: left;
      margin-right: 25px;
      vertical-align: middle;
    }
    .reply {
      float: right;
      vertical-align: middle;
    }
  }
}
</style>
